<template>
  <div>
    <el-card>
      <div class="houseHeader">
        <div class="left">
          <el-button type="primary" @click="isShowHouseDialog = true"
            >添加房产</el-button
          >
        </div>

        <div class="right">
          <el-select v-model="searchObj.category" placeholder="全部分类">
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>

          <el-select v-model="searchObj.agent" placeholder="全部经纪">
            <el-option
              v-for="item in agentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>

          <el-input
            v-model="searchObj.title_contains"
            placeholder="请输入标题关键字"
          ></el-input>

          <el-button @click="btnFilter" type="primary" class="searchBtn"
            >搜索</el-button
          >
          <el-button type="warning" @click="btnRese" class="resetBtn"
            >重置搜索</el-button
          >
        </div>
      </div>

      <hr class="hr" />

      <el-table
        border
        height="600px"
        style="width: 100%"
        :data="houseData[curPage]"
      >
        <el-table-column label="封面" width="200px" prop="image">
          <template #default="{ row }">
            <img :src="row.image" alt="" class="houseCover" v-fiximg="require('@/assets/11.jpg.png')"/>
          </template>
        </el-table-column>

        <el-table-column label="标题" width="145px" prop="title">
        </el-table-column>

        <el-table-column label="标签" width="140px" class-name="tag">
          <template #default="{ row }">
            <el-tag type="success" v-for="item in row.tags" :key="item" >{{
              item
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="地址" prop="address"></el-table-column>

        <el-table-column label="分类" prop="category.title"></el-table-column>

        <el-table-column label="经纪">
          <template #default="{ row }">
            {{ row.agent ? row.agent.name : "" }}
          </template>
        </el-table-column>

        <el-table-column label="价格" prop="price"></el-table-column>

        <el-table-column
          label="介绍"
          prop="desc"
          width="200px"
        ></el-table-column>

        <el-table-column label="图片" width="400px" class-name="coverImg">
          <template #default="{ row }">
            <img
              v-for="item in row.photos"
              :key="item"
              :src="item"
              alt=""
              class="housePhotos"
            />
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150px">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="btnUpdate(row.id)"
              >编辑</el-button
            >
            <el-button type="danger" size="small" @click="btnDel(row.id)">
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <House
        :isShowDialog.sync="isShowHouseDialog"
        @updateHouseList="getHouseList()"
        ref="houseDialog"
      ></House>

      <el-row type="flex" justify="center">
        <el-pagination
          layout="total,prev,pager,next"
          :page-size="pageSize"
          @current-change="currentChange"
          :total="houseList.length"
        ></el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getHouseList, delHouse } from "@/api/house.js";
import { dimensionOneToTwo } from "@/share";
import House from "@/components/house";
export default {
  components: { House },
  data() {
    return {
      houseList: [],
      housePhotos: [],
      searchObj: {
        agent: "",
        category: "",
        title_contains: "",
      },
      pageSize: 4,
      houseData: [],
      curPage: 0,
      isShowHouseDialog: false,
      agentList: [],
      categoryList: [],
      // currentPage: 1,
      // _limit: "2",
      // _start: 0,
      // this._start = newpage * this._limit - this._limit
    };
  },

  async created() {
    this.getHouseList();

    await this.$store.dispatch("agent/getAgent");
    await this.$store.dispatch("category/getCategoryList");

    this.categoryList = this.$store.getters.categoryList;
    this.agentList = this.$store.getters.agentList;
  },

  methods: {
    async getHouseList(data) {
      this.houseList = await getHouseList(data);
      this.houseData = await dimensionOneToTwo(this.houseList, this.pageSize);
    },

    currentChange(newCur) {
      this.curPage = newCur - 1;
    },

    async btnDel(id) {
      await this.$confirm("您确定删除吗");
      await delHouse(id);
      this.getHouseList();
      this.$message.success("删除成功");
      if (this.houseData[this.curPage].length === 1) {
        this.curPage--;
        this.getHouseList();
      }

      if (this.houseList.length === 1) {
        this.curPage = 0;
        await this.getHouseList();
        this.btnRese();
      }
    },

    btnUpdate(id) {
      this.$refs.houseDialog.getHouseById(id);
    },

    async btnFilter() {
      const checkedObj = {};
      for (const key in this.searchObj) {
        if (this.searchObj[key]) {
          checkedObj[key] = this.searchObj[key];
        }
      }
      if (JSON.stringify(checkedObj) === "{}") {
        this.$message.warning("您还没有输入呢");
        return;
      }

      const testHouseList = await getHouseList(checkedObj);

      if (!testHouseList.length) {
        this.$message.warning("没有你想要的内容呢");
        this.btnRese();
        return;
      } else {
        this.curPage = 0;
        this.getHouseList(checkedObj);
      }
    },

    btnRese() {
      this.searchObj = {
        agent: "",
        category: "",
        title_contains: "",
      };

      this.getHouseList();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input--suffix .el-input__inner {
  width: 120px;
}
/deep/.el-input__inner {
  width: 300px;
}

.houseHeader {
  display: flex;
  justify-content: space-between;
  .right {
    display: flex;
  }
}
/deep/.el-table {
  .tag {
    .el-tag {
      margin-right: 5px;
    }
  }
}

.hr {
  border: none;
  height: 1px;
  background-color: rgba(204, 204, 204, 0.267);
  margin: 20px 0;
}

.houseCover {
  width: 199px;
  height: 152px;
  overflow: hidden;
}
.housePhotos {
  width: 100px;
  height: 100px;
  margin-left: 8px;
}
.el-tag {
  margin: 0 8px 8px;
  img {
    width: 120px !important;
  }
}

/deep/.el-input--suffix .el-input__inner {
  margin-right: 10px;
}

.searchBtn {
  margin-left: 10px;
}

.resetBtn {
  margin-left: 20px;
}

/deep/.el-select .el-input .el-select__caret {
  margin-right: 10px;
}
</style>